<template>
    <div class="user-home">
        <div class="md-con-fixed">
            <ul class="user-list clear">

                <li @click="back()">
                </li>
                <li>
                    个人中心
                </li>
                <li>
                </li>
            </ul>
        </div>
        <section class="user-info">
            <div class="no-login" @click="pink()" v-show="!login">
                <img src="../assets/images/default_hd.png">
                <span>点击头像登录</span>
            </div>
            <div class="no-login" v-show="login">
                <img src="../assets/images/头像.jpg">
                <span>时夜Saye</span>
            </div>
        </section>
        <div class="main1">
            <div class="user-list1">
                <a class="u1"  @click="sign()">
                    <span></span><em>个人信息</em>
                </a>
                <router-link to="/paly"  class="u3">
                    <span></span><em>我玩过的</em>
                </router-link>

                
                <router-link to="/enshrine" class="u4">
                    <span></span><em>我的收藏</em>
                </router-link>


                <a class="u5" @click="sign()">
                    <span></span><em>系统通知</em>
                </a>
                <a class="u6" @click="sign()">
                    <span></span><em>联系我们</em>
                </a>
                <a class="u8" @click="sign()">
                    <span></span><em>申诉</em>

                </a>
                <a class="u7 logout" @click="setUp()">
                    <span></span><em>退出登录</em>
                </a>

            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';


export default {

    data() {
        return {
            login: null
        }
    },
    methods: {
        back() {
            this.$router.push("/home")

        },
        sign() {
            Toast("该功能V3才开启")
        },
        pink() {
            this.$router.push("/login")
        },
        setUp() {
            Dialog.confirm({
                title: "你不就想退出登录嘛",
                message: "行吧",
            })
                .then(() => {
                    window.localStorage.clear("login")
                    this.$router.go(0)
                })
                .catch(() => {
                    // on cancel
                });
        },
    },
    created() {
        this.login = window.localStorage.getItem("login");
        console.log(this.login);
    }

}
</script>
<style lang="scss" scoped>
.main1 {
    background-color: #fff;
    padding: 18.5px 14px;
    border-radius: 20px 20px 0 0;
    min-height: 150px;
}

.user-list1 a.u7 span {
    background-position: 0 -393px;
}

.user-list1 a.u8 span {
    background-position: 0 -440px;
}

.user-list1 a.u5 span {
    background-position: 0 -258px;
}

.user-list1 a.u4 span {
    background-position: 0 -183px;
}

.user-list1 a.u3 span {
    background-position: 0 -122px;
}

.user-list1 a.u2 span {
    background-position: 0 -60px;
}

.user-list1 a::after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("../assets/images/arrow.png") no-repeat center;
    position: absolute;
    right: 0;
    top: 24px;
    background-size: 12px 12px;
}

em,
i {
    font-style: normal;
    vertical-align: top;
}

.user-list1 a.u1 span {
    background-position: 0 2px;
}

.user-list1 a span {
    width: 26px;
    height: 23px;
    float: left;
    background: url("../assets/images/user_icon_20220713.png") no-repeat;
    background-size: 26px 600px;
    margin: 17px 0 0;
}

.user-list1 a {
    height: 60px;
    line-height: 60px;
    display: block;
    font-size: 16px;
    padding-right: 10px;
    position: relative;
    user-select: none;
}

.no-login span,
.login span {
    display: block;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
}

.no-login img,
.login img {
    width: 60px;
    height: 60px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    display: inline-block;
}

.no-login img {
    background-color: #e5fff4;
}

.user-info {
    margin: 15px auto 30px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.user-list {

    height: 48px;
    width: 100%;

    color: #333;
    font-size: 16.405px;
    z-index: 90;
}

.user-list li+li {
    width: 64%;
    -webkit-box-pack: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-list li {
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 48px;
}

.user-list {
    max-width: 500px;
    margin: 0 auto;

    height: 48px;
    width: 100%;

    color: #fff;
    font-size: 16px;
    font-weight: bold;

    z-index: 90;
    top: 0;
}

.user-list li:first-child {
    cursor: pointer;
    width: 18%;
    color: #BFBFBF;
    font-size: 20px
}

.user-list li:last-child {
    width: 18%;
}

.user-list li:first-child::before {
    background: url("https://rs.sfacg.com/web/m/images/menu_top_icon.png") no-repeat -49.216px 9.96px;
    background-size: 100px;
    content: "";
    height: 48px;
    width: 25px;
    display: block;
    position: absolute;
    left: 10px;
}

em,
i {
    font-style: normal;
    vertical-align: top;
}

.user-home {
    background: url("../assets/images/user_bodybg.jpg") no-repeat center top;
    background-size: 100% 100%;
    min-height: 6.4rem;
    max-width: 750px;
    min-width: 375px;
    margin: 0 auto;
}
</style>